<template>
  <div>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 标题 -->
      <h1>
        <i class="el-icon-success"></i> 发布问卷成功
      </h1>
      <div class="text">分享链接</div>
      <el-row :gutter="10">
        <el-col :span="9">
          <el-input readonly="readonly" v-model="link">
            <el-button
              slot="append"
              v-clipboard:copy="link"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >复制</el-button>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="fillIn()">打开</el-button>
        </el-col>
      </el-row>
      <div class="qrcode" ref="qrCodeUrl"></div>
    </el-card>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
      // 获取问卷分享链接
      link: this.$route.query.link,
      questionnaireid: this.$route.query.questionnaireid,
      qrcode: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: this.link, // 需要转换为二维码的内容
        width: 150,
        height: 150,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    })
  },
  methods: {
    async fillIn() {
      this.$router.push({
        path: '/fillin',
        query: { questionnaireid: this.questionnaireid }
      })
    },
    // 复制成功时的回调函数
    onCopy(e) {
      this.$message.success('内容已复制到剪切板！')
    },
    // 复制失败时的回调函数
    onError(e) {
      this.$message.error('复制失败！')
    }
  }
}
</script>

<style lang="less" scoped>
.text {
  padding-bottom: 15px;
}
h1 {
  color: green;
  font-size: 30px;
}
.qrcode {
  // height: 100px;
  // width: 100px;
  margin: 20px 10%;
  background-color: white;
  padding: 6px;
}
</style>
